<template>
  <div class="app-container">
    <el-card :bordered="false">
      <el-form  ref="formValidate" :rules="ruleValidate" :model="formValidate" label-width="130px" >
        <el-row :gutter="24">
          <!-- 商家信息-->
          <el-col v-bind="grid2">
            <el-form-item label="技师名称：" prop="technicianName">
              <el-input v-model="formValidate.technicianName" :disabled="disabled" placeholder="请输入技师名称"  />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="地址详情：" prop="address">
              <el-input :disabled="disabled" v-model="formValidate.address"  placeholder="请输入地址详情" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="手机号:" prop="phone">
              <el-input :disabled="disabled" v-model="formValidate.phone"  placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="技师简介：" prop="intro">
              <el-input :disabled="disabled" v-model="formValidate.intro" type="textarea" :rows="3" placeholder="请输入技师简介" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="是否需要出行费" prop=" isTravelExpense">
              <el-radio-group v-model="formValidate.isTravelExpense" :disabled="disabled">
                  <el-radio :label="0">是</el-radio>
                  <el-radio :label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="技师性别" prop=" sex">
              <el-radio-group v-model="formValidate.sex" :disabled="disabled">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="人气推荐" prop="popularityExtend">
              <el-radio-group v-model="formValidate.popularityExtend" :disabled="disabled">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2" v-if="$route.params.id" >
            <el-form-item label="营业状态" >
              <el-select v-model="formValidate.state" placeholder="请选择" :disabled="disabled">
                    <el-option
                      v-for="item in stateList"
                      :key="item.state"
                      :label="item.text"
                      :value="item.state">
                    </el-option>
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="技师行业" prop="type">
              <el-cascader
              :disabled="disabled"
              :show-all-levels="false"
                  v-model="type_occupation"
                  :options="options"
                  :props="props"
                  @change="handleChange">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="从业年份" prop="workExperience">
              <el-input :disabled="disabled" v-model="formValidate.workExperience" :rows="3" placeholder="请输入从业年份：" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
          <el-form-item label="经纬度" prop="latitude">
            <el-input :disabled="disabled" v-model="formValidate.latitude" placeholder="请输入维度" :rows="6" />
          </el-form-item>
        </el-col>
        <el-col :span="3">
             <el-button :disabled="disabled" type="primary" icon="el-icon-map-location" @click="getPoint"   > 查看经纬度</el-button>

        </el-col>
          <!-- <el-col v-bind="grid2">
            <el-form-item label="状态" prop="">
              <el-radio v-model="formValidate.isShow" label="1">显示</el-radio>
             <el-radio v-model="formValidate.isShow" label="2">不显示</el-radio>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="营业执照：" prop="businessLicense">
              <single-pic v-model="formValidate.businessLicense" :disabled="!disabled"  type="image" :num="1" :width="150" :height="150" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="头像:" prop="technicianAvatar">
              <single-pic v-model="formValidate.technicianAvatar " :disabled="!disabled" type="image" :num="1" :width="150" :height="150" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item v-if="!disabled">
          <el-button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <period-form ref="form" ></period-form>
  </div>
</template>

<script>
// import { getCates } from '@/api/yxStoreCategory'
import {details,  yxTechnicianCategory,yxTechnician,addTechnician} from '@/api/technician'
import PeriodForm from './PeriodForm.vue'
import editor from '../components/Editor'
import picUpload from '@/components/pic-upload'
import mulpicUpload from '@/components/mul-pic-upload'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import MaterialList from '@/components/material'
import singlePic from '@/components/singlematerial'
import UeditorWrap from 'vue-ueditor-wrap';
export default {
  components: { editor, picUpload, mulpicUpload, Treeselect, MaterialList, UeditorWrap, singlePic,PeriodForm },
  data() {
    return {

      disabled:false,
      props: {
        value: 'n',
        label:'n',
        children:'c',
        multiple:false
      },
      props:{
        value:'id',
        label:'cateName'
      },
      stateList:[
        {
          state:1,
          text:'待审核',
          type:'warning'
        },
        {
          state:2,
          text:'已通过',
          type:'success'

        },
        {
          state:-1,
          text:'已拒绝',
          type:'danger'

        },
        {
          state:3,
          text:'营业中',
          type:''

        },
        {
          state:4,
          text:'休息中',
          type:'info'

        },
      ],
      options: [],
      spinShow: false,
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      grid3: {
        xl: 18,
        lg: 18,
        md: 20,
        sm: 24,
        xs: 24
      },
      formDynamicNameData: [],
      isBtn: false,
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // address
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: ''
      },
      columns: [],
      carouselMapArr:[],
      otherQualificationsArr:[],
      formValidate: {
          achievement: "",
          address: "",
          businessLicense: '',
          createTime: "",
          popularityExtend:1,
          examineDate: '',
          id: 2,
          intro: "",
          isTravelExpense: 0,
          latitude: "",
          longitude: "",
          otherQualifications: '',
          remark: "",
          state: 1,
          technicianAvatar: '',
          technicianName:"",
          type: "",
          sex:1,
          uid: 0,
          updateTime: "",
          workExperience: "",
          phone:''
         },
         type_occupation:[],
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      loading: false,
      ruleValidate: {

        technicianName: [
          { required: true, message: '请输入技师名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址详情', trigger: 'blur' }
        ],
        workExperience: [
          { required: true, message: '请输入从业年份', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请输入经纬度', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请输入选择技师行业', trigger: 'change' }
        ],
        phone:[
          {required:true,message:'请输入手机号码',trigger:'blur'},
          {validator:(rule,value,callback)=>{
                    if(value!=""){
                         if(value=="不详"){
                              callback();
                              return
                         }
                         let reg11=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                         if(reg11.test(value)){
                                callback()
                         }else{
                             callback(new Error("请输入正确格式手机号！"))
                         }
                    }else{
                             callback()
                    }
         },trigger:'blur'}
        ],
        technicianAvatar: [
          { required: true, message: '请上传头像', trigger: 'blur' }
        ],
        businessLicense: [
          { required: true, message: '请上传营业执照', trigger: 'blur' }
        ]

      },
      attrs: []
    }
  },
  watch: {

    'form.sliderImageArr': function(val) {
      if (val) {
        this.form.slider_image = val.join(',')
      }
    }
  },
  mounted () {
    console.log('this.$route',this.$route.params.id);

    yxTechnicianCategory().then(res=>{
      this.options=res.content

        if (this.$route.params.id){
        this.getDetailsById()


      }
      console.log('res.content',res.content)
    })
    if(this.$route.name=='lookTechnician'){
      this.disabled=true
    }else{
      this.disabled=false
    }


  },
  methods: {
    typeEcho(pid, treeData) {
      treeData.forEach((item) => {
        if (item.children.length>0) {
            item.children.forEach((item1)=>{
          if (item1.id==pid) {
            this.type_occupation=[item.id,item1.id]
          }
        })
        }

      });
    },
    handleChange(e){
      console.log(e)
      this.formValidate.type=e[1]
    },
    getPoint(){
      window.open('https://lbs.qq.com/getPoint/')
    },
    getDetailsById(){
      let params={}
       params.id=this.$route.params.id
       details(params.id).then(res=>{
        let data=res
          this.formValidate=data
          this.formValidate.isTravelExpense=this.formValidate.isTravelExpense-''
          console.log(this.formValidate)
          this.formValidate.latitude=data.latitude+','+data.longitude
          this.typeEcho(data.type, this.options);
          // this.formValidate.dayTime=data.dayTime?data.dayTime.split('-'):["00:00","22:00"]

          this.formValidate.uid=data.uid+''

          this.$forceUpdate()
      })


    },

    // 提交
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log('this.formValidate11111',this.formValidate)
          // return
          let stf = this.formValidate.latitude.split(',')
          this.formValidate.longitude=stf[1]
          this.formValidate.latitude=stf[0]
            if (this.$route.params.id) {
              yxTechnician(this.formValidate).then(async res => {
                      this.$message({
                        message:'操作成功',
                        type: 'success'
                      });
                      setTimeout(() => {
                        this.$router.push({ path: '/HomeService/technician' });
                      }, 500);
                    }).catch(res => {
                      this.formValidate.latitude=stf.join(',')
                      this.$message({
                        message:res.message,
                        type: 'error'
                      });
                })
            }else{
              addTechnician(this.formValidate).then(async res => {
                this.$message({
                  message:'操作成功',
                  type: 'success'
                });
                setTimeout(() => {
                  this.$router.push({ path: '/HomeService/technician' });
                }, 500);
              }).catch(res => {
                this.formValidate.latitude=stf.join(',')
                this.$message({
                  message:res.message,
                  type: 'error'
                });
              })
            }
        }else{
          this.formValidate.validTime=this.formValidate.validTime.split('-')
        }
      })
    },
    // 表单验证
    validate (prop, status, error) {

      if (status === false) {
        this.$message.warning(error);
      }
    },
    addCustomDialog () {
      window.UE.registerUI('yshop', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },


    cancel() {
      this.resetForm()
    }
  }
}
</script>

<style scoped lang="stylus">
  .submission
    margin-left 10px;
  .color-list .tip{
    color: #c9c9c9;
  }
  .color-list .color-item{
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color:#fff;
    margin-right :10px;
  }
  .color-list .color-item.blue{
    background-color: #1E9FFF;
  }
  .color-list .color-item.yellow{
    background-color: rgb(254, 185, 0);
  }
  .color-list .color-item.green{
    background-color: #009688;
  }
  .columnsBox
    margin-right 10px
  .priceBox
    width 100%
  .rulesBox
    display flex
    flex-wrap: wrap;
  .curs
    cursor pointer
</style>
